<template>
    <div>
        <h1>方阵</h1>
        <el-row>
            <el-col>
                <el-form label-width="100px">
                    <el-form-item label="正方形：">
                        <el-checkbox v-model="isSquare" @change="changeShape"></el-checkbox>
                    </el-form-item>
                    <el-form-item label="每行：">
                        <el-input-number v-model="columns" :min="1" :max="50" :step="1" @change="changeColumn"></el-input-number>个
                    </el-form-item>
                    <el-form-item label="每列：">
                        <el-input-number v-model="rows" :min="1" :max="50" :step="1" :disabled="isSquare"></el-input-number>个
                    </el-form-item>
                </el-form>
                <span v-for="i in rows" :key="i">
                    <span v-for="j in columns" :key="i + '_' + j">
<!--                        width: 100px; {{getValue(i, j)}} {{i + '-' + j}}-->
                        <i :class="['el-icon-apple', 'apple']" :style="{'margin-bottom':'5px', color: getSquareLevelColor(i, j)}"></i>
                    </span>
                    <br/>
                </span>
            </el-col>
        </el-row>

        <h1>正方形</h1>
        <el-form label-width="100px">
            <el-form-item label="边长：">
                <el-input-number v-model="squareSideLength" :min="1" :max="800" :step="5" @change="changeSquare"></el-input-number>
            </el-form-item>
            <el-form-item label="隔几米种植：">
                <el-input-number v-model="squareStep" :min="1" :max="800" :step="1" @change="changeSquare"></el-input-number>
            </el-form-item>
            <el-form-item>
                <el-alert v-if="squareSideLength % squareStep != 0"
                        title="边长必须是隔几米的倍数"
                        type="error" :closable="false">
                </el-alert>

                <el-button :disabled="squareSideLength % squareStep != 0" type="primary" @click="plantSquare">种植</el-button>
            </el-form-item>
        </el-form>
        <v-stage :config="squareStageSize">
            <v-layer>
                <v-rect :config="{
                      x: 50,
                      y: 50,
                      width: squareSideLength2,
                      height: squareSideLength2,
                      stroke: 'black',
                    }"
                />
                <template v-for="circle in squareCircleArr">
                    <v-circle :key="circle" :config="{
                          x: circle.x,
                          y: circle.y,
                          radius: circle.radius,
                          opacity: circle.opacity,
                          fill: circle.color,
                        }"
                    />
                </template>
            </v-layer>
        </v-stage>

        <h1>三角形</h1>
        <el-form label-width="100px">
            <el-form-item label="三角形长度：">
                <el-input-number v-model="triangleSideLength" :min="1" :max="800" :step="5" @change="changeTriangle"></el-input-number>
            </el-form-item>
            <el-form-item label="隔几米种植：">
                <el-input-number v-model="triangleStep" :min="1" :max="800" :step="1" @change="changeTriangle"></el-input-number>
            </el-form-item>
            <el-form-item>
                <el-alert v-if="triangleSideLength % triangleStep != 0"
                          title="边长必须是隔几米的倍数"
                          type="error" :closable="false">
                </el-alert>

                <el-button :disabled="triangleSideLength % triangleStep != 0" type="primary" @click="plantTriangle">种植</el-button>
            </el-form-item>
        </el-form>

<!--        {{triangleCircleArr}}-->
        <v-stage :config="triangleStageSize">
            <v-layer>
                <v-line :config="{
                    x: 50,
                    y: 50,
                    points: [this.triangleSideLength2 / 2, 0, 0, triangleLeftY, this.triangleSideLength2, triangleRightX],
                    // tension: 0.5,
                    closed: true,
                    stroke: 'black',
                    fillLinearGradientStartPoint: { x: -50, y: -50 },
                    fillLinearGradientEndPoint: { x: 50, y: 50 },
                    fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
                  }"/>

                <template v-for="circle in triangleCircleArr">
                    <v-circle :key="circle" :config="{
                          x: circle.x,
                          y: circle.y,
                          radius: circle.radius,
                          opacity: circle.opacity,
                          fill: circle.color,
                        }"
                    />
                </template>
            </v-layer>
        </v-stage>

    </div>
</template>

<script>
    import distinctColors from 'distinct-colors'
    const width = window.innerWidth - 50;
    const height = window.innerHeight;
    const levelColor = distinctColors({count: 100})

    export default {
        name: "matrix",
        data() {
            return {
                isSquare: true,
                columns: 6,
                rows: 6,
                squareStageSize: {
                    width: width,
                    height: height
                },
                triangleStageSize: {
                    width: width,
                    height: height
                },
                squareSideLength: 20,
                squareStep: 4,
                squareCircleArr: [],

                triangleSideLength: 20,
                triangleStep: 4,
                triangleCircleArr: [],
            };
        },
        methods: {
            changeSquare() {
                this.squareCircleArr = []
                this.squareStageSize.height = this.squareSideLength2 + 100
            },
            changeTriangle() {
                this.triangleStageSize.height = this.triangleSideLength2 + 100
                this.triangleCircleArr = []
            },
            plantSquare() {
                let squareCircleArr = []
                let xStart = 50
                let yStart = 50
                for(let i = 0; i <= this.squareSideLength2 / this.squareStep2; i++) {
                    squareCircleArr.push({
                        x: xStart,
                        y: yStart,
                        radius: 5,
                        opacity: 0.8,
                        color: 'red'
                    })
                    squareCircleArr.push({
                        x: xStart,
                        y: yStart + this.squareSideLength2,
                        radius: 5,
                        opacity: 0.8,
                        color: 'red'
                    })
                    xStart += this.squareStep2
                }

                xStart = 50
                yStart = 50
                for(let i = 0; i <= this.squareSideLength2 / this.squareStep2; i++) {
                    squareCircleArr.push({
                        x: xStart,
                        y: yStart,
                        radius: 10,
                        opacity: 0.5,
                        color: 'green'
                    })
                    squareCircleArr.push({
                        x: xStart + this.squareSideLength2,
                        y: yStart,
                        radius: 10,
                        opacity: 0.5,
                        color: 'green'
                    })
                    yStart += this.squareStep2
                }
                this.squareCircleArr = squareCircleArr
            },
            plantTriangle() {
                let triangleCircleArr = []
                let xStart = 50
                let yStart = 50
                let stepSum = 0
                let size = this.triangleSideLength2 / this.triangleStep2
                for(let i = 0; i <= size; i++) {
                    let x1 = xStart + stepSum * Math.cos(Math.PI / 3)
                    let y1 = this.triangleLeftY + xStart - stepSum * Math.sin(Math.PI / 3)
                    triangleCircleArr.push({
                        x: x1,
                        y: y1,
                        radius: 10,
                        opacity: 1,
                        color: 'green'
                    })
                    triangleCircleArr.push({
                        x: this.triangleSideLength2 - x1 + xStart * 2,
                        y: y1,
                        radius: 5,
                        opacity: 0.8,
                        color: 'red'
                    })

                    stepSum += this.triangleStep2
                }

                for(let i = 0; i <= size; i++) {
                    triangleCircleArr.push({
                        x: this.triangleStep2 * i + xStart,
                        y: this.triangleLeftY + yStart,
                        radius: 12,
                        opacity: 0.5,
                        color: 'brown'
                    })
                }

                this.triangleCircleArr = triangleCircleArr
            },
            getSquareLevelColor(row, column) {
                // let levelColor = ['', 'red', 'green', 'blue', 'aqua', 'gold']
                for(let level = 1; level <= this.rows; level++) {
                    if(row == level && row == column) {
                        return levelColor[level]
                    }
                    if(row == this.rows - level + 1 && row == column) {
                        return levelColor[level]
                    }
                    if((column >= level && column <= this.columns - level + 1) && (row == level || row + level - 1 == this.rows)) {
                        return levelColor[level]
                    }
                    if((row >= level && row <= this.rows - level + 1) && (column == level || column + level - 1 == this.columns)) {
                        return levelColor[level]
                    }
                }
                return ''
            },
            getValue(i, j) {
                return (i-1) * this.columns  + j
            },
            changeShape() {
                if(this.isSquare) {
                    this.rows = this.columns
                }
            },
            changeColumn() {
                if(this.isSquare) {
                    this.rows = this.columns
                }
            },
        },
        computed: {
            triangleSideLength2() {
                return this.triangleSideLength * 20
            },
            triangleStep2() {
                return this.triangleStep * 20
            },
            triangleLeftY() {
                return 0.866 * this.triangleSideLength2
            },
            triangleRightX() {
                return 0.866 * this.triangleSideLength2
            },
            squareSideLength2() {
                return this.squareSideLength * 20
            },
            squareStep2() {
                return this.squareStep * 20
            }
        },
        mounted() {
            this.changeSquare()
            this.changeTriangle()
        }

    }
</script>

<style scoped>
    .apple {
        font-size: 30px;
    }
    .l1 {
        color: red;
    }
    .l2 {
        color: green;
    }
    .l3 {
        color: blue;
    }
    .l4 {
        color: gold;
    }
    .l5 {
        color: aqua;
    }
</style>
